<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>demo</title>
	<meta name="keywords" content=""/>
	<meta name="description" content=""/>
	<meta name="viewport" content="width=device-width"/>
	<link rel="shortcut icon" href="img/touchicon.png"/>
	<link rel="stylesheet" href=""/>
	<style type="text/css">
		input{position:absolute;top:50px;right:20px;z-index:99;}
		.adPic{
			position:absolute;top:0;left:0;text-align:center;
		}
		.adPic>img{
			height:100px;vertical-align:bottom;
		}
		.adPic span{position:absolute;bottom:0;left:0;right:0;color:white;}
	</style>
</head>
<body>
	<div id="box"></div>
	<input type="button" value="改变图片位置" onclick="change()">
	<script>
		var imgs = Array(
			['../img/1.jpg','图片1','夕阳1'],
			['../img/2.jpg','图片2','夕阳2'],
			['../img/3.jpg','图片3','夕阳3'],
			['../img/4.jpg','图片4','夕阳4'],
			['../img/5.jpg','图片5','夕阳5'],
			['../img/6.jpg','图片6','夕阳6'],
			['../img/7.jpg','图片7','夕阳7'],
			['../img/8.jpg','图片8','夕阳8'],
			['../img/9.jpg','图片9','夕阳9'],
			['../img/10.jpg','图片10','夕阳10']
		);
		var boxObj = document.getElementById('box');
		function change(){
			var s = '';
			for(var i in imgs){
				s = s + '<div class="adPic" style="top:'+ Math.ceil(Math.random()*500) + 'px;left:'+ Math.ceil(Math.random()*1000) + 'px;border-style:solid;border-color:rgba('+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+',1);border-width:'+Math.ceil(Math.random()*8) + 'px;"><img src="'+imgs[i][0]+'" alt="'+imgs[i][1]+'" /><span>'+imgs[i][2]+'</span></div>';
			}
			boxObj.innerHTML = s;
		}
	</script>
</body>
</html>